---
type: tutorial
title: Создайте свою первую страницу в Astro
description: |-
  Учебное пособие: Создайте свой первый блог на Astro —
  Добавьте новые страницы на ваш сайт с навигационными ссылками между ними
i18nReady: true
---
import Checklist from '~/components/Checklist.astro';
import Blanks from '~/components/tutorial/Blanks.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Теперь, когда вы знаете, что файлы `.astro` отвечают за страницы на вашем сайте, самое время создать одну из них!

<PreCheck>
 - Создать две новые страницы на вашем сайте: О сайте и Блог
 - Добавить навигационные ссылки на страницы
 - Развернуть обновленную версию вашего сайта в Интернете
</PreCheck>

## Создайте новый файл `.astro`

<Steps>
1. В панели файлов вашего редактора кода перейдите в папку `src/pages/`, где вы увидите существующий файл `index.astro`.

2. В этой же папке создайте новый файл с названием `about.astro`.

3. Скопируйте или перепечатайте содержимое файла `index.astro` в новый файл `about.astro`.

    :::tip
    Ваш редактор может показать сплошной белый круг на ярлыке вкладки для этого файла. Это означает, что файл еще не сохранен. В меню Файл в VS Code включите "Автоматическое сохранение", и вам больше не придется сохранять файлы вручную.
    :::

4. Добавьте `/about` в конец URL вашего сайта в адресной строке и убедитесь, что страница загружается. (например, `http://localhost:4321/about`)
</Steps>

Сейчас ваша страница "О сайте" должна выглядеть точно так же, как и первая, но мы собираемся это изменить!

## Отредактируйте свою страницу

Отредактируйте HTML-код, чтобы эта страница была о вас.

Чтобы изменить или добавить больше содержимого на страницу "О сайте", добавьте дополнительные HTML-элементы, содержащие контент. Вы можете скопировать и вставить приведенный ниже HTML-код между существующими тегами `<body></body>`, или создать свои.

```astro title="src/pages/about.astro" ins={3-8} del={2}
<body>
  <h1>My Astro Site</h1>
  <h1>About Me</h1>
  <h2>... and my new Astro site!</h2>

  <p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>

  <p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
</body>
```

Теперь снова зайдите на страницу `/about` во вкладке браузера, и вы увидите обновленный контент.

## Добавьте навигационные ссылки

Чтобы было проще просматривать все страницы, добавьте HTML-ссылки навигации по страницам перед `<h1>` в верхней части обеих страниц (`index.astro` и `about.astro`):

```astro title="src/pages/about.astro" ins={1-2}
<a href="/">Home</a>
<a href="/about/">About</a>

<h1>About Me</h1>
<h2>... and my new Astro site!</h2>
```

Убедитесь, что вы можете нажимать эти ссылки и перемещаться между страницами на вашем сайте.

:::note
В отличие от многих фреймворков, Astro использует стандартные элементы HTML `<a>` для навигации между страницами (также называемыми _маршрутами_), с традиционным обновлением страницы.
:::

<Box icon="puzzle-piece">
## Попробуйте сами — добавьте страницу блога

Добавьте третью страницу `blog.astro` на свой сайт, следуя тем же шагам, [что и выше](#создайте-новый-файл-astro).

(Не забудьте добавить третью навигационную ссылку на каждую страницу.)

<details>
<summary>Покажите мне шаги.</summary>

<Steps>
1. Создайте новый файл в папке `src/pages/blog.astro`.
2. Скопируйте все содержимое файла `index.astro` и вставьте его в `blog.astro`.
3. [Добавьте третью навигационную ссылку](#добавьте-навигационные-ссылки) вверху каждой страницы:
</Steps>

```astro title="src/pages/index.astro" ins={4}
<body>
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>

  <h1>My Astro Site</h1>
</body>
```
</details>
</Box>

Теперь у вас должен быть сайт с тремя страницами, которые ссылаются друг на друга. Пришло время добавить немного контента на страницу "Блог".

Обновите содержимое страницы `blog.astro`, добавив:
```astro astro title="src/pages/blog.astro" ins={7-8} del={6}
<body>
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>

  <h1>My Astro Site</h1>
  <h1>My Astro Learning Blog</h1>
  <p>This is where I will post about my journey learning Astro.</p>
</body>
```

Предварительно просмотрите весь сайт, посетив все три страницы в предварительном просмотре браузера, и убедитесь, что:
- Каждая страница правильно ссылается на все три страницы.
- Каждая из ваших двух новых страниц имеет свой собственный описательный заголовок 
- Каждая из двух новых страниц имеет свой собственный текст параграфа

## Опубликуйте свои изменения в Интернете

Если вы следовали нашим настройкам в Модуле 1, вы можете опубликовать свои изменения на вашем действующем сайте через Netlify.

Когда вы будете довольны тем, как выглядит ваша предварительная версия, **зафиксируйте** свои изменения в вашем репозитории на GitHub.

<Steps>
1. В VS Code просмотрите файлы, которые изменились с момента вашего последнего зафиксированного коммита на GitHub.

    - Перейдите на вкладку **Source Control** в левом меню. На ней должна отображаться маленькая цифра "3".

    - Вы должны увидеть `index.astro`, `about.astro` и `blog.astro` в списке файлов, которые изменились.

2. Введите сообщение о зафиксированном коммите (например, "Добавлены две новые страницы - about и blog") в текстовом поле и нажмите <kbd>Ctrl + Enter</kbd> (в macOS: <kbd>Cmd ⌘ + Enter</kbd>), чтобы зафиксировать изменения в вашем текущем рабочем пространстве.

3. Нажмите кнопку <kbd>Sync Change</kbd> на GitHub.

4. Подождав несколько минут, зайдите на свой URL-адрес Netlify и убедитесь, что ваши изменения опубликованы в реальном времени.
</Steps>

:::tip[Регулярно фиксируйте и развертывайте]
Выполняйте эти шаги каждый раз, когда приостанавливаете работу! Ваши изменения будут обновлены в вашем репозитории GitHub. Если вы развернули на сайте Netlify, он будет пересобран и опубликован заново.
:::



<Box icon="check-list">
## Чек-лист

<Checklist>
- [ ] Я могу создать новую страницу для своего сайта и сделать ссылку на нее с существующей страницы.
- [ ] Я могу зафиксировать свои изменения на GitHub и обновить свой живой сайт на Netlify.
</Checklist>
</Box>

### Ресурсы

- [Маршрутизация на основе файлов в Astro](/ru/basics/astro-pages/#маршрутизация-на-основе-файлов)

- [HTML-страницы Astro](/ru/basics/astro-pages/#astro-страницы)